<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>头像</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weuix.min.css"/>
      <script src="../zepto.min.js"></script>
<script>
$(function(){
 $(".weui-tabnav .weui-tabnav-item").click(function(){
        $(this).addClass("weui-tabnav-current").siblings().removeClass('weui-tabnav-current');
        });
 $(".weui-tabnav-red .weui-tabnav-item").click(function(){
        $(this).addClass("weui-tabnav-red-current").siblings().removeClass('weui-tabnav-red-current');
        });      
  var lazyloadImg = new LazyloadImg({
            el: '.weui-updown [data-src]', //匹配元素
            top: 50, //元素在顶部伸出长度触发加载机制
            right: 50, //元素在右边伸出长度触发加载机制
            bottom: 50, //元素在底部伸出长度触发加载机制
            left: 50, //元素在左边伸出长度触发加载机制
            qriginal: false, // true，自动将图片剪切成默认图片的宽高；false显示图片真实宽高
            load: function(el) {
                el.style.cssText += '-webkit-animation: fadeIn 01s ease 0.2s 1 both;animation: fadeIn 1s ease 0.2s 1 both;';
            },
            error: function(el) {

            }
        });


})


</script>
</head>

<body ontouchstart>

<div class="weui_cells">
        
        
                    <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p>
                    <div class="weui-avatar">
       <img class="weui-avatar-img1" src="http://wx.qlogo.cn/mmopen/QCLjgzwSStfKSdiayKp1zfMFDGqj2PbIgQUYBxvf8LsKU1icRzFFZib6icA7Wa8V6LfNcKhG6dDjFchricmlZp7zTsw/0" >
       <img  class="weui-avatar-img2" src="" >
       </div>
       </p>
                </div>
                <div class="weui_cell_ft">认证头像</div>
            </div>
            
   <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p>
<div class="weui-tabnav"> <a href="javascript:" class="weui-tabnav-item weui-tabnav-current"> 中国 </a> <a href="javascript:" class="weui-tabnav-item"> 美国 </a> <a href="javascript:" class="weui-tabnav-item"> 小日本 </a> </div>
       </p>
                </div>
                <div class="weui_cell_ft">绿色</div>
            </div>           
  <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p>
<div class="weui-tabnav-red"> <a href="javascript:" class="weui-tabnav-item weui-tabnav-red-current"> 最新排行榜 </a> <a href="javascript:" class="weui-tabnav-item"> 流行排行榜 </a> </div>
       </p>
                </div>
                <div class="weui_cell_ft">红色</div>
            </div>            
    <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p>
<span class='weui-loading'></span>
       </p>
                </div>
                <div class="weui_cell_ft">loading动画类 .weui-loading</div>
            </div> 
     <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p>
<i class='xz180 icon icon-28'></i>&nbsp;&nbsp;<i class='xz360 icon icon-33'></i>
       </p>
                </div>
                <div class="weui_cell_ft">旋转类 .xz180 .xz360</div>
            </div>
     <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p class='weui-updown'>
<img src="" data-src="http://7xr193.com1.z0.glb.clouddn.com/2.jpg" height='100' />
       </p>
                </div>
                <div class="weui_cell_ft">渐显.weui-updown</div>
            </div>
  
       <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p class='weui-updown'>
<img   src="" data-src="http://7xr193.com1.z0.glb.clouddn.com/1.jpg" height='100' />
       </p>
                </div>
                <div class="weui_cell_ft">左边图片都是懒加载</div>
            </div> 
        <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p class='weui-updown'>
<img   src="" data-src="http://7xr193.com1.z0.glb.clouddn.com/2.jpg" height='100' />
       </p>
                </div>
                <div class="weui_cell_ft"></div>
            </div>   
       <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p class='weui-updown'>
<img   src="" data-src="http://7xr193.com1.z0.glb.clouddn.com/3.jpg" height='100' />
       </p>
                </div>
                <div class="weui_cell_ft"></div>
            </div>                      
      <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p class='weui-updown'>
<img   src="" data-src="http://7xr193.com1.z0.glb.clouddn.com/1.jpg" height='100' />
       </p>
                </div>
                <div class="weui_cell_ft"></div>
            </div> 
        <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p class='weui-updown'>
<img   src="" data-src="http://7xr193.com1.z0.glb.clouddn.com/2.jpg" height='100' />
       </p>
                </div>
                <div class="weui_cell_ft"></div>
            </div>   
       <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p class='weui-updown'>
<img   src="" data-src="http://7xr193.com1.z0.glb.clouddn.com/3.jpg" height='100' />
       </p>
                </div>
                <div class="weui_cell_ft"></div>
            </div>                 
      <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p class='weui-updown'>
<img   src="" data-src="http://7xr193.com1.z0.glb.clouddn.com/1.jpg" height='100' />
       </p>
                </div>
                <div class="weui_cell_ft"></div>
            </div> 
        <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p class='weui-updown'>
<img   src="" data-src="http://7xr193.com1.z0.glb.clouddn.com/2.jpg" height='100' />
       </p>
                </div>
                <div class="weui_cell_ft"></div>
            </div>   
       <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p class='weui-updown'>
<img   src="" data-src="http://7xr193.com1.z0.glb.clouddn.com/3.jpg" height='100' />
       </p>
                </div>
                <div class="weui_cell_ft"></div>
            </div>                 
        
        
        </div>
        
       
</body>
</html>
